<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta http-equiv="X-ua-compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width,initial-scale=1.0">
		<title></title>
		<style>
			body{margin:0;padding:0;}
			body{background-color: #000;}
			.wrap{
				position:relative;
				overflow:hidden;
				margin:50px auto;
				width:420px;
				height:420px;
				background-color: #fff;
				border-radius:3%;
				
				animation-name:border-top;
				animation-duration:2s;
				animation-timing-function:linear;
				animation-iteration-count:2;
				animation-direction:normal;
			}
			.wrap .top{
				width:420px;
				height:10px;
				position:absolute;
				top:0px;
				left:-420px;
				background-color: red;
				animation:top 10s forwards linear infinite;
			}
			@keyframes top{
				100%{left:0px};
			}
			.wrap .right{
				width:10px;
				height:420px;
				position:absolute;
				top:-420px;
				right:0px;
				background-color: blue;
				animation:right 10s forwards linear infinite;
			}
			@keyframes right{
				100%{top:0px};
			}
			.wrap .bottom{
				width:420px;
				height:10px;
				position:absolute;
				bottom:0px;
				left:420px;
				background-color: pink;
				animation:left 10s forwards linear infinite;
			}
			.wrap .left{
				width:10px;
				height:420px;
				position:absolute;
				bottom:-420px;
				right:410px;
				background-color: yellow;
				animation: bottom 10s forwards linear infinite;
			}
			@keyframes bottom{
				100%{bottom:0px};
			}
			@keyframes left{
				100%{left:0px};
			}
			.wrap .content{
				overflow:hidden;
				margin:50px;
				width:310px;
				height:310px;
				
				/* background-origin:content-box; */
				background-size:310px 310px;
				border-radius:10px;
			}
			.wrap .content div{
				float:left;
				width:60px;
				height:60px;
				background: url('02.jpg') no-repeat;
			/* 	background-color: #ccc; */
				/* border:1px solid transparent; */
				/* border-radius:10%; */
				opacity:0;
			}
			.wrap .content .tp1{
				background-position:0px 0px;
				animation:go 1s 0s linear forwards;
			}
			.wrap .content .tp2{
				
				background-position:-60px 0px;
				animation:go 2s 1s linear forwards;
			}
			.wrap .content .tp3{
				background-position:-120px 0px;
				animation:go 2s 2s linear forwards;
			}
			.wrap .content .tp4{
				background-position:-180px 0px;
				animation:go 2s 3s linear forwards;
			}
			.wrap .content .tp5{
				background-position:-240px 0px;
				animation:go 2s 4s linear forwards;
			}
			.wrap .content .tp6{
				background-position:0px -60px;
				animation:go 1s 1s linear forwards;
			}
			.wrap .content .tp7{
				background-position:-60px -60px;
				animation:go 1s 1s linear forwards;
			}
			.wrap .content .tp8{
				background-position:-120px -60px;
				animation:go 1s 2s linear forwards;
			}
			.wrap .content .tp9{
				background-position:-180px -60px;
				animation:go 1s 3s linear forwards;
			}
			.wrap .content .tp10{
				background-position:-240px -60px;
				animation:go 1s 4s linear forwards;
			}
			.wrap .content .tp11{
				background-position:0px -120px;
				animation:go 1s 2s linear forwards;
			}
			.wrap .content .tp12{
				background-position:-60px -120px;
				animation:go 1s 2s linear forwards;
			}
			.wrap .content .tp13{
				background-position:-120px -120px;
				animation:go 1s 2s linear forwards;
			}
			.wrap .content .tp14{
				background-position:-180px -120px;
				animation:go 1s 3s linear forwards;
			}
			.wrap .content .tp15{
				background-position:-240px -120px;
				animation:go 1s 4s linear forwards;
			}
			.wrap .content .tp16{
				background-position:0px -180px;
				animation:go 1s 3s linear forwards;
			}
			.wrap .content .tp17{
				background-position:-60px -180px;
				animation:go 1s 3s linear forwards;
			}
			.wrap .content .tp18{
				background-position:-120px -180px;
				animation:go 1s 3s linear forwards;
			}
			.wrap .content .tp19{
				background-position:-180px -180px;
				animation:go 1s 3s linear forwards;
			}
			.wrap .content .tp20{
				background-position:-240px -180px;
				animation:go 1s 4s linear forwards;
			}
			.wrap .content .tp21{
				background-position:0px -240px;
				animation:go 1s 4s linear forwards;
			}
			.wrap .content .tp22{
				background-position:-60px -240px;
				animation:go 1s 4s linear forwards;
			}
			.wrap .content .tp23{
				background-position:-120px -240px;
				animation:go 1s 4s linear forwards;
			}
			.wrap .content .tp24{
				background-position:-180px -240px;
				animation:go 1s 4s linear forwards;
			}
			.wrap .content .tp25{
				background-position:-240px -240px;
				animation:go 1s 4s linear forwards;
			}
			@keyframes go{ 
				100%{
					opacity:1;
				}
			}
		</style>
	</head>
	<body>
		<div class='wrap'>
			<div class="top"></div>
			<div class="right"></div>
			<div class="bottom"></div>
			<div class="left"></div>
			<div class='content'>
				<div class='tp1'></div>
				<div class='tp2'></div>
				<div class='tp3'></div>
				<div class='tp4'></div>
				<div class='tp5'></div>
				<div class='tp6'></div>
				<div class='tp7'></div>
				<div class='tp8'></div>
				<div class='tp9'></div>
				<div class='tp10'></div>
				<div class='tp11'></div>
				<div class='tp12'></div>
				<div class='tp13'></div>
				<div class='tp14'></div>
				<div class='tp15'></div>
				<div class='tp16'></div>
				<div class='tp17'></div>
				<div class='tp18'></div>
				<div class='tp19'></div>
				<div class='tp20'></div>
				<div class='tp21'></div>
				<div class='tp22'></div>
				<div class='tp23'></div>
				<div class='tp24'></div>
				<div class='tp25'></div>
				
			</div>
		</div>
	</body>
</html>
